<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/member.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>
    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 1">
    <header class="header header-shadow">
        <div class="header-left">
            <div tapmode onclick="comeBack();" class="nav-left"><img class="icon-back" src="../../icon/icon-back.png"/>
            </div>
        </div>
        <h2>修改昵称</h2>
    </header>
</div>

<div class="header-h" style="padding-top: 1.5rem;"></div>
<section class="html_section pr30 pl30 ">
    <ul class="setting_option f30 info">
        <li class="between line_center">
            <div>当前昵称</div>
            <div class="line_center">
                <div class="f28 c-666" id="nickname"></div>
            </div>
        </li>
        <li class="between line_center">
            <div>新昵称</div>
            <div class="line_center">
                <input type="text" id="name" class="t-r" placeholder="请输入新昵称">
            </div>
        </li>
    </ul>
    <p class="mt30 c-999 f22">注：每次修改昵称需要消耗500ml盐汽水</p>
    <div class="mt100 btn1" tapmode onclick="openApp()">立即修改</div>
</section>

<section class="mask_pop">
    <div class="mask"></div>
    <div class="msg_pop2 pop pb20" style="display: none;">
        <div class="msg_pop_title">提示</div>
        <div class="msg_pop_content" style="text-align: center;">修改昵称需要消耗500ml盐汽水, <br>您确定修改吗？</div>
        <div class="flex_center pb20">
            <div class="btn7 mr30" onclick="popClose();">放弃修改</div>
            <div class="btn6" onclick="saveInfo();">确定修改</div>
        </div>
    </div>
</section>

</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    apiready = function () {
        setFixStatusBar(); //设置状态栏
        keybackListener()
        getMemberInfo()
    }

    function openApp() {
        if(!isDefine($("#name").val())){
            pop.notice('新昵称不能为空');
            return;
        }
        $(".mask").show();
        $(".mask_pop").addClass("on");
        $(".msg_pop2").show();
    }

    function popClose() {
        $(".mask").hide();
        $(".mask_pop").removeClass("on");
    }


    //提交个人信息
    function saveInfo() {
        var param = {
            token: $api.getStorage('token'),
            name: $("#name").val(),
        }
        if(isDefine(param.name)){
            var len = getLength(param.name);
            if(len > 12){
                pop.notice('最多输入6个汉字或者12个字符');
                return;
            }
        }
        pop.loading();
        getAjax(Interface.edit_name, param, function (res) {
            pop.close();
            pop.notice(res.msg);
            //添加个人资料修改监听事件
            api.sendEvent({
                name: 'memberInfo',
                extra: {}
            });
            getMemberInfo();
            setTimeout(function () {
                comeBack()
            },2000)
            popClose()
        }, function (error) {
            pop.close();
            pop.notice(error.msg);
            popClose()
        });
    }

    //获取用户信息
    function getMemberInfo() {
        var param = {
            token: $api.getStorage('token')
        }
        pop.loading()
        getAjax(Interface.memberIndex, param, function (res) {

            var data = res.data;

            //昵称
            $("#nickname").html(data.name);
            pop.close();

        }, function (error) {
            pop.close();
            pop.notice('读取数据失败')
        })
    }


</script>
